/**
 * Created by kurong on 2021/9/13.
 */

/*
 获得元素属的src性
 ele.属性名
 */

var imgEle = document.querySelector(".small-banner");
console.log("img 的src属性值:" + imgEle.src);
console.log("img 的class属性值:" + imgEle.className);


var number = document.querySelector(".pronumber").value;
console.log("number:" + number);

imgEle.src = "images/small-banner2.png";
document.querySelector(".pronumber").value = 88;

/**
 * 鼠标悬浮在小图上，大图片的src的值 变换
 *
 * @param index
 */
function changeImg(index) {

    var bigBannerImgArray = ["big-banner1.jfif", "big-banner2.jfif", "big-banner3.jfif", "big-banner4.jfif", "big-banner5.jfif"];

    var bigImgSrc = "images/";
    switch (index) {
        case 1:
            bigImgSrc += bigBannerImgArray[0];
            break;
        case 2:
            bigImgSrc += bigBannerImgArray[1];
            break;
        case 3:
            bigImgSrc += bigBannerImgArray[2];
            break;
        case 4:
            bigImgSrc += bigBannerImgArray[3];
            break;
        case 5:
            bigImgSrc += bigBannerImgArray[4];
            break;
    }

    document.querySelector(".banner img").src = bigImgSrc;
}

var proArray = [
    {
        proId: 3169434,
        proName: '心心相印消毒湿巾',
        proPrice: 19.9
    },
    {
        proId: 32832992,
        proName: '奥妙洗衣液',
        proPrice: 28
    },
    {
        proId: 18932932,
        proName: '科沃斯地宝',
        proPrice: 1999.9
    }
];


var ulEle = document.querySelector(".pro-list");

for (var i = 0; i < proArray.length; i++) {
    var id = proArray[i].proId;
    var name = proArray[i].proName;
    var price = proArray[i].proPrice;

    var liEle = '<li> 商品id: <a href="" class="pro-id"> ' + id + '</a>,' +
        '商品名称: <span class="pro-name">' + name + '</span>,' +
        '商品价格: <span>￥</span><span class="pro-price">' + price + '</span> </li>';

    ulEle.innerHTML += liEle;
}
